<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>高德地图示例（1-18层缩放、刻度尺和指南针）</title>
    <!-- 引用本地下载的amap.js和amap-plugin.js文件 -->
    <script src="js/amap.js"></script>
    <script src="js/amap-plugin.js"></script>
  </head>
  <body>
    <div id="container" style="width: 100%; height: 400px"></div>
    <script>
      // 拦截所有网络请求，防止请求外部资源
      (function () {
        var originalFetch = window.fetch;
        var originalXHR = window.XMLHttpRequest;

        window.fetch = function () {
          console.error("Blocked fetch request:", arguments);
          return Promise.reject(new Error("Blocked fetch request"));
        };

        window.XMLHttpRequest = function () {
          var xhr = new originalXHR();
          xhr.open = function (method, url, async, user, password) {
            if (url.includes("restapi.amap.com")) {
              console.error("Blocked XHR request to:", url);
              return;
            }
            originalXHR.prototype.open.call(
              this,
              method,
              url,
              async,
              user,
              password
            );
          };
          return xhr;
        };
      })();

      // 确保脚本在文档加载完成后运行
      document.addEventListener("DOMContentLoaded", function () {
        if (typeof AMap !== "undefined") {
          var map = new AMap.Map("container", {
            center: [116.397428, 39.90923], // 地图中心点
            zoom: 13, // 地图初始缩放级别
            zooms: [1, 18], // 设置缩放级别范围
          });
          let base_url = "http://localhost:3000";
          // let base_url = "http://192.168.10.99:3000";
          const customLayer = new AMap.TileLayer({
            getTileUrl: function (x, y, z) {
              return `${base_url}/city/${z}/${x}/${y}.jpg`;
            },
            opacity: 1,
            zIndex: 99,
          });
          window.map = new AMap.Map("container", {
            zoom: 12,
            resizeEnable: true,
            defaultCursor: "pointer",
            showLabel: true, //是否显示文字标注
            center: this.centerPoint,
            scrollWheel: true,
            viewMode: "3D", //显示罗盘 就需要3D地图了
            pitch: 0,
            layers: [customLayer],
          });

          // 添加刻度尺控件
          AMap.plugin(["AMap.Scale"], function () {
            var scale = new AMap.Scale();
            window.map.addControl(scale);
          });

          // 添加指南针控件
          AMap.plugin(["AMap.ToolBar"], function () {
            var toolBar = new AMap.ToolBar({
              liteStyle: true, // 使用精简样式
              position: "RB", // 右下角
            });
            window.map.addControl(toolBar);
          });
        }
      });
    </script>
  </body>
</html>
